import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, Bottom } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Bottom" component={Bottom} />

## Bottom

Anchored space on the bottom edge of it's parent.

### Specifying a % size

<Canvas>
	<Story name="Default (%)">
		<ViewPort>
			<Bottom style={green} size="50%">
				{description("Bottom 50%")}
			</Bottom>
		</ViewPort>
	</Story>
</Canvas>

### Specifying a pixel size

<Canvas>
	<Story name="Default (px)">
		<ViewPort>
			<Bottom style={green} size={300}>
				{description("Bottom 300px")}
			</Bottom>
		</ViewPort>
	</Story>
</Canvas>

### As a scrollable space

<Canvas>
	<Story name="Scrollable">
		<ViewPort>
			<Bottom style={green} size={300} scrollable={true}>
				{lorem}
			</Bottom>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<AnchoredProps />
		<StandardProps />
	</PropsTable>
</Story>